<!doctype html>
<html lang="en"><head><meta charset="utf-8">
  <audio id="myaudio" src="https://mingxin142.gitee.io/audio/3.mp3" acontrols="controls" autoplay="autoplay" hidden="true"></audio>
  <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>国庆红旗头像在线生成 </title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <style>
    a:link{color:#fff;text-decoration: none;}
    a:visited{color:#fff;}
    #export{display:none;margin:0 auto;width:250px;height:250px;margin-top:50px;margin-bottom:50px}
    .operation-btns .o-btn1{background-size:11.6rem 4.325rem}
    .operation-btns .o-btn2{background-size:11.6rem 3.75rem}
    center{color: #fff;}
  </style>
  <link rel="stylesheet" type="text/css" href="css/jqery.css">
  <link rel="stylesheet" type="text/css" href="https://icon.bloglab.cn/css/chunk-vendors.c470e980.css">
</head>
<body>
  <div class="wrapper">
    <img src="" alt="" class="img-load" style="width: 9.5rem; position: fixed; top: 0px; left: -9999px;">
    <div class="operation-header">
      <div class="h-title">

      </div>
    </div>
    <div class="operation-box">
      <a class="prev" onclick="changeHat()"></a>
      <div class="operation-img">
        <div class="cropper-content" id="content">
          <canvas class="" id="cvs"></canvas>
        </div>
      </div>
      <a class="next" onclick="changeHat()"></a>
    </div>
    <img id="export" alt="国庆专属头像" src="">
    <div class="operation-btns">
      <a class="o-btn1">
        <input class="o-btn1" id="upload" type="file" onchange="viewer()" style="opacity: 0;">
      </a>
      <a class="o-btn2" onclick="exportFunc()" style="display: none;">
      </a>
    </div>

    <div class="operation-done">
      <img src="img/163275557236523584.png" alt="" class="act-done-happy">
    </div>
    <center>
    <a href="http://www.china.com.cn/" target="_blank">新中国</a> - 于1949年10月1日成立
    </center>
  </div>
  <div style="display: none">
    <img id="img" src="" alt="">
    <img class="hide" id="hat0" src="img/hat6.png">
    <img class="hide" id="hat1" src="img/hat0.png">
    <img class="hide" id="hat2" src="img/hat2.png">
    <img class="hide" id="hat3" src="img/hat3.png">
    <img class="hide" id="hat4" src="img/hat1.png">
    <img class="hide" id="hat5" src="img/hat4.png">
    <img class="hide" id="hat6" src="img/hat5.png">
    <img class="hide" id="hat7" src="img/hat7.png">
    <img class="hide" id="hat8" src="img/hat8.png">
    <img class="hide" id="hat9" src="img/hat24.png">
    <img class="hide" id="hat10" src="img/hat10.png">
    <img class="hide" id="hat11" src="img/hat11.png">
    <img class="hide" id="hat12" src="img/hat12.png">
    <img class="hide" id="hat13" src="img/hat13.png">
    <img class="hide" id="hat14" src="img/hat14.png">
    <img class="hide" id="hat15" src="img/hat15.png">
    <img class="hide" id="hat16" src="img/hat16.png">
    <img class="hide" id="hat17" src="img/hat17.png">
    <img class="hide" id="hat18" src="img/hat18.png">
    <img class="hide" id="hat19" src="img/hat19.png">
    <img class="hide" id="hat21" src="img/hat21.png">
    <img class="hide" id="hat22" src="img/hat22.png">
    <img class="hide" id="hat23" src="img/hat23.png">
    <img class="hide" id="hat24" src="img/hat9.png">
  </div>
<script src="js/fabric.min.js"></script>
<script src="js/app.ae33b1c6.js"></script>
<script>
  var cvs = document.getElementById("cvs");
  var ctx = cvs.getContext("2d");
  var exportImage = document.getElementById("export");
  var img = document.getElementById("img");
  var hat = "hat0";
  var canvasFabric;
  var hatInstance;
  //var screenWidth = window.screen.width < 500 ? window.screen.width : 300;
  var screenWidth = document.getElementById("content").scrollHeight;
  function viewer() {
    var file = document.getElementById("upload").files[0];
    console.log(file);
    var reader = new FileReader;
    if (file) {
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        img.src = reader.result;
        img.onload = function() {
          img2Cvs(img)
        }
      }
    } else {
      img.src = ""
    }
  }
  function img2Cvs(img) {
    cvs.width = img.width;
    cvs.height = img.height;
    cvs.style.display = "block";
    canvasFabric = new fabric.Canvas("cvs", {
      width: screenWidth,
      height: screenWidth,
      backgroundImage: new fabric.Image(img, {
        scaleX: screenWidth / img.width,
        scaleY: screenWidth / img.height
      })
    });
    changeHat();

    document.getElementsByClassName("o-btn1")[0].style.display = "none";
    document.getElementsByClassName("o-btn2")[0].style.display = "block";
    //document.getElementById("tip").style.opacity = 1
  }
  function changeHat() {
    document.getElementById(hat).style.display = "none";
    var hats = document.getElementsByClassName("hide");
    hat = "hat" + (+hat.replace("hat", "") + 1) % hats.length;
    var hatImage = document.getElementById(hat);
    hatImage.style.display = "block";
    if (hatInstance) {
      canvasFabric.remove(hatInstance)
    }
    console.log(hatImage.width);
    console.log(100 / hatImage.width);
    hatInstance = new fabric.Image(hatImage, {
      top: 0,
      left: 0,
      scaleX: screenWidth / hatImage.width,
      scaleY: screenWidth / hatImage.height,
      cornerColor: "#0b3a42",
      cornerStrokeColor: "#fff",
      cornerStyle: "circle",
      transparentCorners: false,
      rotatingPointOffset: 30
    });
    hatInstance.setControlVisible("bl", false);
    hatInstance.setControlVisible("tr", false);
    hatInstance.setControlVisible("tl", false);
    hatInstance.setControlVisible("mr", false);
    hatInstance.setControlVisible("mt", false);
    canvasFabric.add(hatInstance)
  }
  function exportFunc() {
    document.getElementsByClassName("operation-box")[0].style.display = "none";
    document.getElementsByClassName("operation-btns")[0].style.display = "none";

    /*document.getElementById("exportBtn").style.display = "none";
    document.getElementById("tip").innerHTML = "长按图片保存或分享";
    document.getElementById("change").style.display = "none";*/
    cvs.style.display = "none";
    exportImage.style.display = "block";
    exportImage.src = canvasFabric.toDataURL({
      width: screenWidth,
      height: screenWidth
    });
    alert('手机长按图片保存 电脑鼠标右击图片保存');
  }
  

</script>
<!--<scripts type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1271692165'%3E%3C/span%3E%3Cscript src='https://s13.cnzz.com/z_stat.php%3Fid%3D1271692165%26show%3Dpic' type='text/javascript'%3E%3C/scripts%3E"));</scripts>
</body>-->
</body></html>